<template>
  <div>
    <div class="my">
      <div class="my-header">
        <div class="header-left">
          <img src="@/assets/img/head.jpg" alt="" class="my-head">
        </div>
        <div class="head-right">
          <div class="my-name">大v超人</div>
          <div class="my-level">
            <div class="level-left">LV1</div>
            <div class="level-right">LV2</div>
          </div>
          <van-progress pivot-text="" color="#CED1EF" :percentage="25" />
          <div class="level-describe">在消费100奇妙币即可升级为LV.2</div>
        </div>
      </div>

      <div class="my-main">
           <div class="main-wrapper">
             <router-link to="/userorder" class="main-list"><span class="icon-left iconfont icon-dingdan"></span><span class="icon-name">我的订单</span><span class="icon-right iconfont icon-icon-arrow-right"></span></router-link>
             <router-link to="/wallet" class="main-list"><span class="icon-left iconfont icon-qianbao"></span><span class="icon-name">我的钱包</span><span class="icon-right iconfont icon-icon-arrow-right"></span></router-link>
             <router-link to="/becomeclerk" class="main-list"><span class="icon-left iconfont icon-mendianyuangong"></span><span class="icon-name">成为工作人员</span><span class="icon-right iconfont icon-icon-arrow-right"></span></router-link>
           </div>
      </div>
    </div>
    <user-footer></user-footer>
  </div>


</template>

<script>
    import UserFooter from "@/components/UserFooter";
    import { Progress } from 'vant';
    import Vue from 'vue';

    Vue.use(Progress);
    export default {
        name: "My",
        components: {
          UserFooter
        }
    }
</script>

<style scoped lang="stylus">
   @import '~style/mixins.styl'
   @import '~style/varibles.styl'
   .my
      padding .2rem
      .my-header
        between()
        padding .3rem
        background #fff
        border-radius .1rem
        .header-left
           width 1.7rem
           right()
           .my-head
              text-align right
              width 1.7rem
              height 1.7rem
              border-radius .1rem
        .head-right
           width calc(100% - 1.7rem)
           padding 0 0 0 .3rem
           .my-name
              font-size .3rem
              color #333
           .my-level
              between-align-items()
              color #333
              padding .2rem 0 .2rem 0
              .level-left
                 font-size .2rem
                 color $DefaultColor
              .level-right
               font-size .2rem
               color $DefaultColor
          .level-describe
             padding-top .3rem
             color $DefaultColor
             font-size .2rem
      .my-main
        margin-top .3rem
        between()
        padding .3rem
        background #fff
        border-radius .1rem
        .main-wrapper
           width 100%
           .main-list
              between-align-items()
              padding .3rem 0
              .icon-left
                 width .4rem
                 color $DefaultColor
                 font-size .4rem
              .icon-name
                 width calc(100% - .6rem)
                 padding-left .3rem
                 font-size .3rem
                 color #333
              .icon-right
                 font-size .2rem
                 width .2rem
                 color #333

</style>
<style>

</style>
